<template>
  <div class="screenHead" >
     <div class="top">
        <span class="text" >说明：目前支持学科和关键字条件筛选</span>
        <el-button @click="$router.push('new')" size="mini" type="success"><i class="el-icon-edit" ></i> 新增试题</el-button>
      </div>
      <!-- 筛选区域的表单 -->
        <el-form  ref="screenRef" :inline="true" :model="formInline" size="small" label-width="80px">
          <el-row>
            <el-col :span="6">
                <el-form-item label="学科"  >
                  <el-select  @change="subchange(formInline.subjectID)" style="width:100%"  v-model="formInline.subjectID" placeholder="请选择">
                    <el-option :label="item.label" :value="item.value" v-for="item in subList" :key="item.value"></el-option>
                  </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item   label="二级目录">
                  <el-select style="width:100%" v-model="formInline.catalogID" placeholder="请选择">
                    <el-option :label="item.label" :value="item.value" v-for="item in dirList" :key="item.value"></el-option>
                  </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="标签">
                  <el-select style="width:100%" v-model="formInline.tags" placeholder="请选择">
                    <el-option :label="item.tagName" :value="item.tagName" v-for="item in tagsList" :key="item.id"></el-option>
                  </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item  label="关键字">
                  <el-input style="width:100%" v-model="formInline.keyword" placeholder="根据题干搜索"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item  label="试题类型">
                  <el-select  style="width:100%"  v-model="formInline.questionType" placeholder="请选择">
                    <el-option :label="item.label" :value="item.value" v-for="item in questionType" :key="item.value"></el-option>
                  </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item    label="难度">
                  <el-select   style=" width:100%"  v-model="formInline.difficulty" placeholder="请选择">
                    <el-option :label="item.label" :value="item.value" v-for="item in difficulty" :key="item.value"></el-option>
                  </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="方向">
                  <el-select  style="width:100%"  v-model="formInline.direction" placeholder="请选择">
                    <el-option :label="item" :value="item" v-for="(item,index) in direction" :key="index"></el-option>
                  </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item    label="录入人">
                  <el-select  style="width:100%"  v-model="formInline.creatorID" placeholder="请选择">
                    <el-option  :value="item.username"  v-for="item in creatorIDs" :key="item.id"></el-option>
                  </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item  label="题目备注">
                  <el-input style="width:100%" v-model="formInline.remarks"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item  label="企业简称">
                  <el-input style="width:100%" v-model="formInline.shortName"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="6">
               <el-form-item  label="城市">
                  <el-select @change="provinceChange(formInline.province)"  style="width:48%; margin-right: 4%;"  v-model="formInline.province" placeholder="请选择">
                    <el-option :label="item" :value="item" v-for="(item,index) in provinces" :key="index"></el-option>
                  </el-select>
                  <el-select  style="width:48%"  v-model="formInline.city" placeholder="请选择">
                   <el-option :label="item" :value="item" v-for="(item,index) in cityList" :key="index"></el-option>
                  </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="6">
               <el-form-item  style="float: right;">
                  <el-button  @click="clearBtn" size="mini">清除</el-button>
                  <el-button @click="searchBtn" size="mini" type="primary">搜索</el-button>
                </el-form-item>
            </el-col>
        </el-row>
      </el-form>

  </div>
</template>

<script>
import { list, choice } from '../../api/hmmm/questions'
// 方向,难度,题型
import { direction, difficulty, questionType } from '../../api/hmmm/constants'
import { citys, provinces } from '../../api/hmmm/citys'
import { simple as userSimple } from '../../api/base/users'
import { simple as dirsimple } from '../../api/hmmm/directorys'
import { simple as subsimple } from '../../api/hmmm/subjects'
import { list as getTagsList } from '../../api/hmmm/tags'
export default {
  name: 'TheTeamCombatIndex',
  props: {
    isEid: {
      type: Boolean
    },
    current: {
      type: Object,
      default: () => {}
    },
    tableData: {
      type: Array,
      default: () => []
    },
    AlltableData: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      formInline: {
        subjectID: '', // 学科
        catalogID: '', // 目录
        tags: '', // 标签名称
        keyword: '', // 关键字
        questionType: '', // 试题类型
        difficulty: '', // 难度
        direction: '', // 方向
        creatorID: '', // 录入人
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        province: '', // 省城
        city: ''// 城区
      },
      subList: [], // 学科列表
      dirList: [], // 目录列表
      tagsList: [], // 标签列表
      difficulty: difficulty, // 难度列表
      questionType: questionType, // 试题类型列表
      direction: direction, // 方向
      creatorIDs: [], // 录入人
      provinces: provinces(), // 拿到所有城市
      cityList: []// 城市下的地区

    }
  },
  created () {
  // 调用获取学科列表
    this.getSubList()
    // 获取用户列表
    this.usersimple()
  },
  methods: {
    // 获取学科列表
    async getSubList () {
      const res = await subsimple()
      // console.log(res)
      // 翻转数组赋值
      this.subList = res.data.reverse()
    },
    // 根据学科获取目录列表
    async subchange (value) {
      // 学科发生变化重置目录内容
      this.formInline.catalogID = ''
      this.formInline.tags = ''
      const res = await dirsimple({ subjectID: value })
      this.dirList = res.data.reverse()
      // 根据学科获取标签列表
      const res1 = await getTagsList({ subjectID: value })
      // console.log(res1.data.items)
      this.tagsList = res1.data.items
    },
    // 获取用户列表
    async usersimple () {
      const res = await userSimple()
      // console.log(res)
      this.creatorIDs = res.data
    },
    // 根据城市获取县
    provinceChange (value) {
      this.formInline.city = ''
      this.cityList = citys(value)
    },
    // 点击清空,清空表单
    clearBtn () {
      this.dirList = [] // 目录列表
      this.tagsList = [] // 标签列表
      this.cityList = []// 城市下的地区
      this.formInline = {
        subjectID: '', // 学科
        catalogID: '', // 目录
        tags: '', // 标签名称
        keyword: '', // 关键字
        questionType: '', // 试题类型
        difficulty: '', // 难度
        direction: '', // 方向
        creatorID: '', // 录入人
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        province: '', // 省城
        city: ''// 城区
      }
    },
    // 点击搜索
    async searchBtn () {
      // console.log(this.isEid)
      var flage = false
      for (const key in this.formInline) {
        if (this.formInline[key] !== '') {
          flage = true
          break
        }
      }
      if (flage === false) {
        this.formInline = {}
      }
      if (this.isEid) {
        this.current.page = 1
        const res = await choice({ ...this.current, ...this.formInline })
        this.$emit('update:tableData1', res.data.items)
        this.$emit('update:total1', res.data.counts)
        this.$emit('update:formInline1', this.formInline)
      } else {
        this.current.page = 1
        const res = await list({ ...this.current, ...this.formInline })
        console.log(res)
        this.$emit('update:tableData', res.data.items)
        console.log(res.data.counts)
        this.$emit('update:total', res.data.counts)
        this.$emit('update:formInline', this.formInline)
      }
    }
  }
}
</script>

<style lang="scss" scoped>

 .text{
      font-size: 12px;
      color: pink;
    }
    .top{
      display: flex;
      justify-content: space-between;
      margin-bottom: 15px;
    }
.el-form-item{
  white-space:nowrap;
  display: flex;
  ::v-deep .el-form-item__content{
    width: 100%;
  }
}
</style>
